<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>新芽后台管理系统</title>

  <link rel="shortcut icon" href="/asserts/images/favicon.ico" type="image/x-icon">
<link href="http://dd.ddandang.top/css/bootstrap.min.css" rel="stylesheet">
<link href="asserts/css/materialdesignicons.min.css" rel="stylesheet">
<link href="asserts/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">

    <!--引入leftNavigation左边导航栏-->
    <div th:include="~{common/module::leftNavigation(flag = 'index',active='空')}"></div>

    <!--头部信息-->

    <div th:include="~{common/module::headerInformation(headerMessage=' 后台首页')}"></div>

    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-primary">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">总回收衣服</p>
                  <p class="h3 text-white m-b-0" id="totalWeight"></p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-tshirt-crew fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>
          
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-danger">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">总回收书籍</p>
                  <p class="h3 text-white m-b-0" id="totalBooksNumber"></p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-book-open-variant fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>
          
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-success">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">捐赠人数</p>
                  <p class="h3 text-white m-b-0" id="totalUsers"></p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>
          
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-purple">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">回收金额</p>
                  <p class="h3 text-white m-b-0" id="totalAmount"></p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="row">
          
          <div class="col-lg-6"> 
            <div class="card">
              <div class="card-header">
                <h4>捐赠数量</h4>
              </div>
              <div class="card-body">
                <canvas class="js-chartjs-bars"></canvas>
              </div>
            </div>
          </div>
          
          <div class="col-lg-6"> 
            <div class="card">
              <div class="card-header">
                <h4>交易历史记录</h4>
              </div>
              <div class="card-body">
                <canvas class="js-chartjs-lines"></canvas>
              </div>
            </div>
          </div>
           
        </div>

        
      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<script type="text/javascript" src="http://dd.ddandang.top/js/jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="/asserts/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/asserts/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src=http://dd.ddandang.top/js/index.min.js></script>
<!--图表插件-->
<script type="text/javascript" src="http://dd.ddandang.top/js/Chart.js"></script>
<!--数字格式化插件-->
<script type="text/javascript" src="http://dd.ddandang.top/js/accounting.min.js"></script>
<script type="text/javascript">

  let totalBooksNumber;
  let totalAmount;
  let totalWeight;
  let totalClothesNumber;
  var $dashChartBarsCnt  = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' );
  var $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );

  var $dashChartBarsData = {
      labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      datasets: [
          {
              label: '衣服总数',
              borderWidth: 1,
              borderColor: 'rgba(0,0,0,0)',
              backgroundColor: 'rgba(51,202,185,0.5)',
              hoverBackgroundColor: "rgba(51,202,185,0.7)",
              hoverBorderColor: "rgba(0,0,0,0)",
              data: [150, 100, 80, 600, 500, 200, 300]
          },
          {
            label: '衣服重量',
            borderWidth: 1,
            borderColor: 'rgba(0,0,0,0)',
            backgroundColor: 'rgba(51,100,185,0.5)',
            hoverBackgroundColor: "rgba(51,202,185,0.7)",
            hoverBorderColor: "rgba(0,0,0,0)",
            data: [60, 50, 120.5, 300, 400, 200, 150]
          },
          {
            label: '书籍总数',
            borderWidth: 1,
            borderColor: 'rgba(0,0,0,0)',
            backgroundColor: 'rgba(249,104,104,0.5)',
            hoverBackgroundColor: "rgba(249,104,104,0.7)",
            hoverBorderColor: "rgba(0,0,0,0)",
            data: [100, 80, 50, 60, 20, 18, 60]
          }
      ]

  };
  var $dashChartLinesData = {
      labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      datasets: [
          {
              label: '回收金额',
              data: [500, 708.89, 750, 500, 500, 500, 500, 500, 500, 500, 500, 500],
              borderColor: '#926DDE',
              backgroundColor: 'rgba(53, 142, 215, 0.175)',
              borderWidth: 1,
              fill: false,
              lineTension: 0.5
          }
      ]
  };
    




// 獲取基本數據
function getData() {
  $.ajax({
    type: 'get',
    url: 'getData',
    success:function (data) {
      totalAmount = data.totalAmount.toFixed(2);
      totalBooksNumber = data.totalBooksNumber;
      totalWeight = data.totalWeight;
      totalClothesNumber = data.totalClothesNumber;
      var totalUsers = accounting.formatMoney(data.totalUsers,'',0);
      $("#totalAmount").text(accounting.formatMoney(totalAmount,'')+"￥");
      $("#totalBooksNumber").text(accounting.formatMoney(totalBooksNumber,'',0)+"本");
      $("#totalUsers").text(totalUsers);
      $("#totalWeight").text(accounting.formatMoney(totalWeight,'')+"KG");
    }
  })
}
var time;
$(function () {
  time = setInterval(getData,200);
});
let i = 0;
let week = 0;
function setMyLineChart(){
  $.ajax({
    url: 'getCountData',
    type: 'get',
    success: function (res) {
      console.log(res);
      $dashChartLinesData.datasets[0].data = res;
      var myLineChart = new Chart($dashChartLinesCnt, {
        type: 'line',
        data: $dashChartLinesData,
      });
    }
  })
}



function setMyBarsChart(){
  //console.log(totalWeight);

  $.ajax({
    url: 'getChartData',
    type: 'get',
    success: function (res) {
      var json = eval("(" + JSON.stringify(res) + ")");
      $dashChartBarsData.datasets[0].data = json.clothes
      $dashChartBarsData.datasets[1].data = json.weights
      $dashChartBarsData.datasets[2].data = json.books
      var myBarsChart = new Chart($dashChartBarsCnt, {
        type: 'bar',
        data: $dashChartBarsData
      });

      console.log(myBarsChart)
      console.log(json);
      console.log(json.clothes);
      console.log($dashChartBarsData)

    }
  })


}


window.onload=function () {
  //console.log(myBarsChart.data.datasets[0].data);
  setMyBarsChart();
  setMyLineChart();
  getData();

};

</script>
</body>
</html>